<template>
    <el-drawer
        v-model="showDrawer"
        :title="drawerTitle"
        direction="rtl"
        @close="closeFn"
        :size="400"
        :close-on-click-modal="false"
    >
       <div class="">
           <el-form
                ref="formRef"
                :model="form"
                label-width="90px"
                :rules="rules"
            >
                <el-form-item label="产品编码:" prop="produceCode">
                    <el-input size="small" placeholder="请填写产品编码"  v-model="form.produceCode"></el-input>
                </el-form-item>
                <el-form-item label="产品名称:" prop="produceName">
                    <el-input size="small" placeholder="请填写产品名称"  v-model="form.produceName"></el-input>
                </el-form-item>
                <el-form-item label="产品规格:" >
                    <el-input size="small" placeholder="请填写产品规格"  v-model="form.produceSpecs"></el-input>
                </el-form-item>
                <el-form-item label="产品类型:">
                    <el-input size="small" placeholder="请填写产品类型"  v-model="form.produceType"></el-input>
                </el-form-item>
           </el-form>
       </div>
       <div class="drawer-footer-box">
           <el-button size="small" @click="closeFn">取消</el-button>
           <el-button type="primary" size="small" :loading="isLoading" @click="submitInfo">确定</el-button>
        </div>
    </el-drawer>
</template>
<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
export default {
    name: 'productDrawer',
    props: {
       showDrawer: {
           type: Boolean,
           default: false,
           required: false
       },
       drawerTitle: {
           type: String,
           default: '新增',
           required: false
       }       
    },
    emits: ['closeDrawerFn', 'submitCallback'],
    setup(props, {emit}){
        let data  = reactive({
          form: {
              produceCode: '',
              produceName: '',
              produceSpecs: '',
              produceType: ''
          },
          isLoading: false,
          isEdit: false
        })
        const rules = reactive({
            produceCode: [
                {
                    required: true,
                    message: '请填写产品编码！',
                    trigger: ['change', 'blur'],
                },
            ],
            produceName: [
                {
                    required: true,
                    message: '请填写产品名称！',
                    trigger: ['change', 'blur'],
                },
            ]
        })        
        const formRef = ref(null)       
        function afterShowDrawer(rowData){           
            // console.log('data.isEdit', data.isEdit)
            data.form = Object.assign({}, rowData)            
        }
        function closeFn(){
            data.isLoading = false     
            formRef.value.resetFields()       
            emit('closeDrawerFn')
        }
        async function addInfo(){
            let requstData = requstData = {...data.form, isEdit:data.isEdit}           
            let res = await axios.post('/addProductInfo', requstData)
            let result = res.data
            if(result.success){
                ElMessage({
                    message: result.result,
                    type: 'success',
                })
                closeFn()
                emit('submitCallback')
            }
            else{
                ElMessage({
                    message: result.result,
                    type: 'error',
                })
                data.isLoading = false     
            }
        }
        function submitInfo(){
            data.isLoading = true            
            formRef.value.validate((valid) => {
                if (valid) {
                    // console.log(data.form)
                    // closeFn()
                    addInfo()
                } else {                    
                    data.isLoading = false
                    return false
                }
            })            
            // console.log(data.isLoading)
            // console.log('提交数据')
        }
        return {
            rules,
            formRef,
            ...toRefs(data),          
            afterShowDrawer,  
            closeFn,
            submitInfo
        }    
    }
}
</script>